<template>
    <!-- 歌曲列表组件 -->
    <div class="artist-list">
        <!-- 播放，收藏按钮 -->
        <div class="play-btn">
            <div
                class="item play-item"
                @click="playAllSong"
            >
                <i class="iconfont niceOutlined_Play"></i>
                播放全部
            </div>
            <div class="item">
                <i class="iconfont niceicon-heart"></i>
                收藏
            </div>
        </div>
        <!-- 歌曲列表 -->
        <div class="list">
            <div class="list-title">
                <div>序号</div>
                <div>歌曲</div>
                <div>歌手</div>
                <div>专辑</div>
                <div>时长</div>
            </div>

            <div
                class="container "
                v-for="(item, index) of songs"
                :key="item.id"
                :class="index == currentIndex && currentSong.id == item.id && playing ? 'playing': ''"
            >

                <div class="index-container flex-center ">

                    <!-- 序号 -->
                    <span class="num">{{ utils.formatZero(index + 1, 2) }}</span>
                    <!-- 歌曲播放中的图标 -->
                    <div class="play-icon">
                        <div
                            class="line"
                            style="animation-delay: -1.2s;"
                        ></div>
                        <div class="line"></div>
                        <div
                            class="line"
                            style="animation-delay: -1.5s;"
                        ></div>
                        <div
                            class="line"
                            style="animation-delay: -0.9s;"
                        ></div>
                        <div
                            class="line"
                            style="animation-delay: -0.6s;"
                        ></div>
                    </div>
                    <!-- 播放图标 -->
                    <i
                        class="iconfont nicebofang2 play-btn"
                        @click="playSong(item, index)"
                    ></i>
                    <!-- 暂停图标 -->
                    <i
                        class="iconfont nicezanting1 pause-btn"
                        @click="pauseSong(item, index)"
                    ></i>
                </div>
                <!-- 歌曲封面 -->
                <div class="avatar">
                    <div class="img">
                        <el-image
                            :key="item.image + '?param=150y150'"
                            :src="item.image + '?param=150y150'"
                            lazy
                        >
                        </el-image>
                    </div>

                    <p class="name ">{{ item.name }}</p>
                </div>
                <!-- 歌曲信息 -->
                <div class="info ellipsis">

                    <p class="singer flex-row ellipsis">
                        <span>{{ item.singer }}</span>
                    </p>
                </div>
                <!-- 歌曲专辑 -->
                <p class="album  ellipsis">{{item.album}}</p>
                <!-- 歌曲时长 -->
                <p class="duration transition">
                    {{ utils.formatSecondTime(item.duration) }}
                </p>
            </div>
        </div>
    </div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'

export default {
    data() {
        return {
        }
    },
    props: {
        songs: {
            type: Array
        },
    },

    created() {
    },
    computed: {
        ...mapGetters(['currentIndex', 'playing', 'currentSong']),
    },
    methods: {
        // 播放歌曲
        playSong(item, index) {
            this.selectPlay({
                list: this.songs,
                index
            })
        },
        // 停止播放歌曲
        pauseSong() {
            this.pausePlay()
        },
        // 播放全部
        playAllSong() {
            this.playAll({
                list: this.songs
            })
        },
        // 播放全部
        ...mapActions([
            // 点击选择播放
            'selectPlay',
            // 点击播放全部
            'playAll',
            'pausePlay'
        ])
    },
}
</script>

<style lang="less" scoped>
.artist-list {
    width: 100%;
    height: 100%;
    .play-btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 15px 0;
        .item {
            margin-right: 15px;
            padding: 10px 15px;
            border-radius: 35px;
            background: #f2f2f2;
            color: #333;
            cursor: pointer;
        }

        .play-item {
            background: #fa2800;
            color: #fff;
        }
    }
    .list {
        width: 100%;
        min-width: 700px;
        margin-bottom: 20px;
        .list-title {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            position: relative;
            background: #fafafa;
            color: #9fa19f;
            div {
                margin: 10px 20px;
            }
            div:nth-child(1) {
                position: absolute;
                left: 10px;
                width: 50px;
            }
            div:nth-child(2) {
                position: absolute;
                left: 12%;
                width: 230px;
            }
            div:nth-child(3) {
                position: absolute;
                left: 42%;
                width: 230px;
            }
            div:nth-child(4) {
                position: absolute;
                left: 65%;
            }
            div:nth-child(5) {
                position: absolute;
                left: 91%;
            }
        }
        .container {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            padding: 30px 18px;
            margin: 0;
            position: relative;
            .name,
            .singer,
            .album {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                color: #4a4a4a;
            }
            .index-container {
                width: 30px;
                margin-left: 10px;
                .num {
                    font-size: 15px;
                    color: #4a4a4a;
                    font-weight: bold;
                }
                .play-icon {
                    display: none;
                    height: 16px;
                    min-width: 18px;
                    overflow: hidden;

                    .line {
                        width: 2px;
                        height: 100%;
                        margin-left: 2px;
                        background-color: #ff410f;
                        animation: play 0.9s linear infinite alternate;
                    }
                }
                .play-btn,
                .pause-btn {
                    color: #ff410f;
                    font-size: 30px;
                    display: none;
                    text-align: left;
                    cursor: pointer;
                }
            }
            &:hover {
                .index-container {
                    .num {
                        display: none;
                    }
                    .play-btn {
                        display: block;
                    }
                }
                &.playing {
                    .index-container {
                        .play-btn {
                            display: none;
                        }

                        .play-icon {
                            display: none;
                        }

                        .pause-btn {
                            display: block;
                        }
                    }
                }
            }
            &.playing {
                p {
                    color: #fa2800;
                }
                .index-container {
                    .num {
                        display: none;
                    }
                    .play-icon {
                        display: flex;
                    }
                    .play-btn {
                        display: none;
                    }
                }
            }
            .avatar {
                position: absolute;
                left: 13%;
                width: 200px;
                display: flex;
                align-items: center;
                .img {
                    width: 45px;
                    height: 45px;
                    margin-right: 15px;
                    .el-image {
                        width: 45px;
                        height: 45px;
                        border-radius: 5px;
                    }
                }
            }
            .info {
                width: 120px;
                position: absolute;
                left: 43%;
            }
            .album {
                width: 200px;
                position: absolute;
                left: 67%;
                margin-left: -10px;
            }
            .duration {
                position: relative;
                left: 90.5%;
                font-size: 14px;
                color: #4a4a4a;
            }
        }
        .container:nth-child(odd) {
            background: #fafafa;
        }
        .container:hover {
            background: #e8e9ed;
        }
    }
}
</style>